<script setup lang="ts">
import { ref, onMounted } from "vue";
import ReCol from "@/components/ReCol";
import { FormProps } from "./components/types";
import { formRules } from "./components/rule";
import { GetAllStation } from '@/utils/api/dispatch/station'
import { useI18n } from "vue-i18n";
const { t } = useI18n();

// 站点列表
let stationSelect = ref([])

const props = withDefaults(defineProps<FormProps>(), {
    formInline: () => ({
        x: null,
        y: null,
        angle: null,
        site: null
    }),
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

onMounted(async () => {
    // 站点列表 
    let { Content: station } = await GetAllStation()
    stationSelect.value = station
})

// 失去焦点时
function inputBlur(val) {
    let value = val.target.value
    let exp = /^[+-]?\d*(\.\d*)?(e[+-]?\d+)?$/;
    if (!exp.test(value)) {
        val.target.value = null
    } else {
        Number(val.target.value)
    }
}

function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>

<template>
    <el-form ref="ruleFormRef" :model="newFormInline" :rules="formRules" label-width="100px">
        <!-- <el-row :gutter="30">
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item label="X轴:" prop="x">
                    <el-input-number v-model="newFormInline.x" controls-position="right" placeholder="请输入X轴" />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item label="Y轴:" prop="y">
                    <el-input-number v-model="newFormInline.y" controls-position="right" placeholder="请输入Y轴" />
                </el-form-item>
            </re-col>
            <re-col :value="12" :xs="24" :sm="24">
                <el-form-item label="角度:" prop="angle">
                    <el-input-number v-model="newFormInline.angle" controls-position="right" placeholder="请输入角度" />
                </el-form-item>
            </re-col>
        </el-row> -->
        <re-col :value="24" :xs="24" :sm="24">
            <el-form-item :label="t(`home.locateTheSite`)" prop="target">
                <el-select v-model="newFormInline.site" filterable clearable :placeholder="t(`home.selectLocationSite`)"
                    style="width:100%">
                    <el-option v-for="item in stationSelect" :key="item.stationid" :label="item.stationname"
                        :value="item.stationname">
                    </el-option>
                </el-select>
            </el-form-item>
        </re-col>
    </el-form>
</template>

<style lang="scss" scoped>
.el-radio {
    margin-right: 16px;
}
</style>
